<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>拖拽缩放</title>
    <style>
      /* 拖拽锚点定位 */
      .box {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 200px;
        height: 200px;
        background-color: #f0f0f0;
        cursor: move;
      }

      .resize-handle {
        position: absolute;
        width: 10px;
        height: 10px;
        background-color: #000;
      }

      .top-left {
        top: -5px;
        left: -5px;
        cursor: nw-resize;
      }

      .top {
        top: -5px;
        left: calc(50% - 5px);
        cursor: ns-resize;
      }

      .top-right {
        top: -5px;
        right: -5px;
        cursor: ne-resize;
      }

      .right {
        top: calc(50% - 5px);
        right: -5px;
        cursor: ew-resize;
      }

      .bottom-right {
        bottom: -5px;
        right: -5px;
        cursor: se-resize;
      }

      .bottom {
        bottom: -5px;
        left: calc(50% - 5px);
        cursor: ns-resize;
      }

      .bottom-left {
        bottom: -5px;
        left: -5px;
        cursor: sw-resize;
      }

      .left {
        top: calc(50% - 5px);
        left: -5px;
        cursor: ew-resize;
      }
    </style>
  </head>
  <body>
    <!-- 拖拽锚点绘制 -->
    <div class="box" id="drag">
      <!-- 左上角 -->
      <div class="resize-handle top-left"></div>
      <!-- 上方 -->
      <div class="resize-handle top"></div>
      <!-- 右上角 -->
      <div class="resize-handle top-right"></div>
      <!-- 右边 -->
      <div class="resize-handle right"></div>
      <!-- 右下角 -->
      <div class="resize-handle bottom-right"></div>
      <!-- 下方 -->
      <div class="resize-handle bottom"></div>
      <!-- 左下角 -->
      <div class="resize-handle bottom-left"></div>
      <!-- 左边 -->
      <div class="resize-handle left"></div>
    </div>
  </body>
  <script>
    // 拖拽功能
    const dragElement = document.getElementById("drag");
    dragElement.addEventListener("mousedown", startDrag);

    function startDrag(event) {
      event.preventDefault();
      const currentHandle = event.target;
      const isResizeHandle = currentHandle.className.includes("resize-handle");
      if (isResizeHandle) return;
      const startX = event.clientX;
      const startY = event.clientY;
      const startLeft = dragElement.offsetLeft;
      const startTop = dragElement.offsetTop;

      document.addEventListener("mousemove", drag);
      document.addEventListener("mouseup", stopDrag);

      function drag(event) {
        const dx = event.clientX - startX;
        const dy = event.clientY - startY;

        const newLeft = startLeft + dx;
        const newTop = startTop + dy;

        dragElement.style.left = newLeft + "px";
        dragElement.style.top = newTop + "px";
      }
      function stopDrag() {
        document.removeEventListener("mousemove", drag);
        document.removeEventListener("mouseup", stopDrag);
      }
    }

    // 缩放功能
    const resizeHandles = document.getElementsByClassName("resize-handle");

    Array.from(resizeHandles).forEach((handle) => {
      handle.addEventListener("mousedown", startResize);
    });

    function startResize(event) {
      event.preventDefault();
      const currentHandle = event.target;
      const direction = currentHandle.className.split(" ")[1];

      const startX = event.clientX;
      const startY = event.clientY;
      const startWidth = dragElement.offsetWidth;
      const startHeight = dragElement.offsetHeight;
      const startLeft = dragElement.offsetLeft;
      const startTop = dragElement.offsetTop;

      document.addEventListener("mousemove", resize);
      document.addEventListener("mouseup", stopResize);

      function resize(event) {
        const dx = event.clientX - startX;
        const dy = event.clientY - startY;
        let width = startWidth,
          height = startHeight,
          left = startLeft,
          top = startTop;
        if (direction.includes("left")) {
          width = startWidth - dx + "px";
          left = startLeft + dx / 2 + "px";
        }
        if (direction.includes("right")) {
          width = startWidth + dx + "px";
          left = startLeft + dx / 2 + "px";
        }
        if (direction.includes("top")) {
          height = startHeight - dy + "px";
          top = startTop + dy / 2 + "px";
        }
        if (direction.includes("bottom")) {
          height = startHeight + dy + "px";
          top = startTop + dy / 2 + "px";
        }
        if (parseInt(width) <= 0 || parseInt(height) <= 0) return;
        dragElement.style.width = width;
        dragElement.style.height = height;
        dragElement.style.left = left;
        dragElement.style.top = top;
      }

      function stopResize() {
        document.removeEventListener("mousemove", resize);
        document.removeEventListener("mouseup", stopResize);
      }
    }
  </script>
</html>
